import { mapGetters, mapMutations, mapActions } from 'vuex'
export const tabsDetailMixin = {
  computed: {
    ...mapGetters([
      'showCompIndex'
    ]),
  },
  methods: {
    isActive(index) {
      return this.showCompIndex === index ? 'actived' : ''
    },
    ...mapActions([
      'setShowCompIndex'
    ])
  }
}

export const homeMixin = {
  methods: {
    specialStyle(flag, obtStyle) {
      // console.log(flag);
      if (flag) {
        return obtStyle
      }
    },

    isFlag(views) {
      return views.body.items.some(view => view.x || view.y)
    },

    runFunc(...arg) {
      return arg
    },

    getStyle(view) {
      if (!view) {
        return
      }

      let obj = {
        height: view.h / 100 + 'rem',
        width: view.w / 100 + 'rem',
        backgroundColor: view.backgroundColor,
        color: view.line_color,
        top: view.y / 100 + 'rem',
        left: view.x / 100 + 'rem',
        background: view.bg_color
      }

      // console.log(obj)
      let res = {}
      for (let key in obj) {
        if (obj[key] !== undefined || obj[key] !== null) {
          res[key] = obj[key]
        }
      }

      return res
    },

    addHttps(url) {
      let res = url.includes('webp?')
      if (!res) {
        let index = url.indexOf('?')
        if (index != -1) {
          url = url.slice(0, index)
        }

      }
      return `https:${url}`
    }
  }
}

export const headerStyleMixin = {
  beforeRouteLeave(to, from, next) {
    let toPath = to.path.slice(1)
    let fromPath = from.path.slice(1)
    let hasTOPath, hasFromPath

    this.hasHeaderPage.forEach(page => {
      if (page === toPath) {
        hasTOPath = true
      } else if (page === fromPath) {
        hasFromPath = true
      }
    })

    if (hasTOPath && hasFromPath) {
      this.setHeaderStyle({ transition: "none" })
    } else {
      this.setHeaderStyle({})
    }

    next(true)
  },
  computed: {
    ...mapGetters(['headerStyle', 'hasHeaderPage'])
  },
  methods: {
    ...mapMutations({
      setHeaderStyle: 'SET_HEADERSTYLE'
    }),
  }
}